<template>
  <div class="container">
    <div class="le">
      <div class="le-zh public-le" @click="dialogVisiblezhihui = true">
        应急指挥
      </div>
      <div class="le-gb public-le" @click="dialogVisibleguangbo = true">
        消防广播
      </div>
      <div class="le-gj public-le" @click="dialogVisiblegaojing = true">
        取消告警
      </div>
    </div>
    <!-- 弹出框  应急指挥 -->
    <el-dialog
      title="应急指挥"
      :visible.sync="dialogVisiblezhihui"
      width="20%"
      top="3vh"
      :modal="false"
      :append-to-body="true"
      :before-close="handleClose"
      @close="dialogVisiblezhihui = false"
    >
      <el-form
        :model="form"
        :rules="rules"
        ref="form"
        size="small"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="应急预案:" prop="yingji" width="100px">
          <el-select v-model="form.yingji" placeholder="请选择应急预案">
            <el-option label="火灾救援预案" value="huozai"></el-option>
            <el-option label="爆炸救援预案" value="baozha"></el-option>
            <el-option label="毒害救援预案" value="duhai"></el-option>
            <el-option label="安防应急预案" value="anfang"></el-option>
            <el-option label="环境污染救援预案" value="hunagjing"></el-option>
            <el-option label="其他救援预案" value="qtjy"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="报警联动:" prop="baojing">
          <el-select v-model="form.baojing" placeholder="请选择报警联动">
            <el-option label="公安" value="gongan"></el-option>
            <el-option label="消防" value="xiaofang"></el-option>
            <el-option label="医院" value="yiyuan"></el-option>
            <el-option label="其他" value="qtld"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="通知人员:" prop="tongzhi">
          <el-select v-model="form.tongzhi" placeholder="请选择通知人员">
            <el-option label="张三" value="zhangsan"></el-option>
            <el-option label="李四" value="lisi"></el-option>
            <el-option label="王五" value="wangwu"></el-option>
            <el-option label="其他" value="qtry"></el-option>
          </el-select>
        </el-form-item>
        <div class="but">
          <el-button @click="dialogVisiblezhihui = false">取消</el-button>
          <el-button @click="dialogVisiblezhihui = false">确定</el-button>
        </div>

        <!-- <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="dialogVisible = false"
            >确 定</el-button
          >
        </span> -->
      </el-form>
    </el-dialog>

    <!-- 弹出框  消防广播 -->
    <el-dialog
      title="消防广播"
      :visible.sync="dialogVisibleguangbo"
      width="20%"
      top="2vh"
      :modal="false"
      :append-to-body="true"
      :before-close="handleClosegaojing"
      @close="dialogVisibleguangbo = false"
    >
      <el-form
        :model="form"
        :rules="rules"
        ref="form"
        size="small"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="广播区域:" prop="yingji" width="100px">
          <el-select v-model="form.yingji" placeholder="请选择广播区域">
            <el-option label="车间1" value="huozai"></el-option>
            <el-option label="车间2" value="baozha"></el-option>
            <el-option label="车间3" value="duhai"></el-option>
            <el-option label="办公楼" value="hunagjing"></el-option>
            <el-option label="园区全部" value="qtjy"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="设置模式:" prop="baojing">
          <el-select v-model="form.baojing" placeholder="请选择模式">
            <el-option label="单次播报" value="gongan"></el-option>
            <el-option label="循环播报" value="xiaofang"></el-option>
            <el-option label="自定义" value="yiyuan"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="播报内容:" prop="tongzhi">
          <el-input v-model="form.tongzhi"></el-input>
        </el-form-item>

        <div class="but">
          <el-button @click="dialogVisibleguangbo = false">取消</el-button>
          <el-button @click="dialogVisibleguangbo = false">确定</el-button>
        </div>

        <!-- <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="dialogVisible = false"
            >确 定</el-button
          >
        </span> -->
      </el-form>
    </el-dialog>
    <!-- 弹出框  取消告警 -->
    <el-dialog
      class="gaojing"
      :visible.sync="dialogVisiblegaojing"
      width="20%"
      title="取消告警"
      top="0.1vh"
      :modal="false"
      :before-close="handleClose"
    >
      <span>请确认该操作是否符合消防应急预案管理要求，并确认是否取消告警</span>
      <div class="but">
        <el-button @click="dialogVisiblegaojing = false">取消</el-button>
        <el-button @click="hidmap">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dialogVisiblezhihui: false,
      dialogVisibleguangbo: false,
      dialogVisiblegaojing: false,
      form: {
        name: "",
        yingji: "",
        baojing: "",
        tongzhi: "",
      },
      rules: {
        yingji: [
          { required: true, message: "请选择应急预案", trigger: "blur" },
        ],
        baojing: [
          { required: true, message: "请选择报警联动", trigger: "change" },
        ],
        tongzhi: [
          { required: true, message: "请选择通知人员", trigger: "change" },
        ],
      },
    };
  },
  methods: {
    handleClose() {
      this.dialogVisiblezhihui = false;
    },
    handleClosegaojing() {
      this.dialogVisibleguangbo = false;
    },
    hidmap() {
      this.$parent.ishidmap();
    },
    // open() {
    //   this.$confirm("是否取消报警?", "提示", {
    //     confirmButtonText: "确定",
    //     cancelButtonText: "取消",
    //     type: "warning",
    //   })
    //     .then(() => {
    //       this.$message({
    //         type: "",
    //         message: "取消成功!",
    //         customClass: "mysuccess",
    //       });
    //     })
    //     .catch(() => {
    //       this.$message({
    //         type: "",
    //         message: "取消失败",
    //       });
    //     });
    // },
  },
};
</script>

<style lang="scss" scoped>
.container {
  position: absolute;
  z-index: 12;
  width: 100%;
  height: 100%;
}
.public-le {
  width: 153px;
  height: 46px;
  border: 20px solid transparent;
  border-width: 16px;
  line-height: 16px;
  border-image-source: url("../../assets/img/left框.png");
  border-image-slice: 16 fill;
  font-size: 22px;
  font-family: YouSheBiaoTiHei;
  color: #48eaff;
}
.le {
  margin-left: 8px;
  display: flex;
  flex-direction: column;
  width: 160px;
  height: 513px;
  .le-zh {
    margin-top: 100px;
  }
  .le-gb,
  .le-gj {
    margin-top: 30px;
  }
  .el-form-item__label {
    text-align: left;
    width: 70px;
  }
  .el-form-item__content {
    margin-left: 70px;
  }
}
.el-dialog .el-input {
  // background-color: #0c4582;
  // opacity: 0.6;
  // font-size: 16px;
  // font-family: YouSheBiaoTiHei;
  // text-align: center;
  // font-weight: 400;
  // color: #1ccce5;
}

.mysuccess {
  color: green;
}
.but {
  display: flex;
  justify-content: space-around;
  margin-top: 10px;
  // padding-bottom: 20px;
}

.gaojing .but {
  margin-top: 15px;
}
</style>
